/*
* Hook闭包原理分析
* */

import { Button } from 'antd';
import {useEffect, useState} from 'react';
import {useMount} from '../../utils';

const test = () => {
  let num = 0

  // eslint-disable-next-line
  const add = () => {
    num += 1

    const message = `现在的num的值为：${num}`

    return function unmount() {
      console.log(message)
    }
  }

  return add
}

const add = test()
const unmount = add()

add()
add()
add()
add()
unmount()

export const Test = () => {
  const [num, setNum] = useState(0)

  const add = () => setNum(num + 1)

  useMount(() => {
    setInterval(() => {
      console.log('num in setInterval', num)
    }, 1000)
  })

  useEffect(() => {
    return () => {
      console.log(num)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
      <span>{num}</span>
      <Button onClick={add}>add</Button>
    </div>
  )
}
